<template>
  <uv-popup ref="popup" mode='bottom' safeAreaInsetBottom bgColor='#FFF' round='40rpx'>
    <view class="column">
      <view class="hd">
        <view class="close" @click="close">取消</view>
        <view class="title">
          <view class="name">选择专栏</view>
          <view class="desc">一个主体可被收录到多个专栏</view>
        </view>
        <view class="confirm" @click="confirm">确认</view>
      </view>
      <uv-line hairline></uv-line>
      <scroll-view scroll-y="true" style="height: 600rpx;">
        <view class="list">
          <view class="item" v-for="(item,index) in list" :key="index" @click="tabSelect(item)">
            <view class="left">
              <view class="select">
                <image src="../../static/checkon.png" class="img" v-if="select.includes(item.id)"></image>
                <view class="noPick" v-else></view>
              </view>
              <view class="title">
                <view class="name">{{ item.name }}</view>
                <view class="desc">{{ item.theme_count }}条内容</view>
              </view>
            </view>
            <view class="right" v-if="detail.column_ids.split(',').map(e => Number(e)).findIndex(o => o == item.id) >= 0">已收录</view>
          </view>
          <uv-empty :show='showLeng' mode="list" marginTop='50rpx'></uv-empty>
        </view>
      </scroll-view>
    </view>
  </uv-popup>
</template>

<script setup>
import { ref, computed } from 'vue';
import { post } from '@/api';
import { useOrder } from '@/store';

const popup = ref(null);
const emit = defineEmits(['click']);
const props = defineProps(['themeType']);

let select = ref([]);
let detail = ref('');
let body = computed(() => {
  const store = useOrder();
  let group = store.group;
  return group;
});

let list = ref([]);
let showLeng = ref(false);

function getList(){
  const params = {
    page: 1,
    limit: 200,
    association_id: body.value.id
  }
  post('api/association_column/getAssociationColumnList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      list.value = data.data;
      
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function confirm(){
  const params = {
    column_ids: select.value.toString()
  }
  let url = '';
  if(props.themeType == 'answer'){
    params.question_id = detail.value.id;
    url = 'api/association_question/setQuestionColumn';
  }else{
    params.theme_id = detail.value.id;
    url = 'api/association_theme/setThemeColumn';
  }
  post(url, params).then(res => {
    if(res.code == 1){
      popup.value.close();
      emit('click');
    }
  })
}
function tabSelect(row){
  const index = select.value.findIndex(o => o == row.id);
  if(index >= 0){
    select.value.splice(index, 1);
  }else{
    select.value.push(row.id);
  }
}
function open(){
  getList();
  popup.value.open();
}
function close(){
  select.value = [];
  detail.value = '';
  list.value = [];
  popup.value.close();
}

defineExpose({
  open,
  select,
  detail
})
</script>

<style lang="scss" scoped>
  .column{
    padding-top: 30rpx;
    .list{
      padding-top: 30rpx;
      .item{
        padding: 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(214, 215, 217, .4);
        .left{
          display: flex;
          align-items: center;
          flex: 1;
          width: 0;
          padding-right: 30rpx;
          .title{
            padding-left: 30rpx;
            .name{
              font-size: 28rpx;
              color: #333;
            }
            .desc{
              font-size: 24rpx;
              color: rgba(0, 0, 0, .4);
            }
          }
          .select{
            width: 30rpx;
            height: 30rpx;
            font-size: 0;
            .noPick{
              width: 30rpx;
              height: 30rpx;
              border-radius: 50%;
              border: 1px solid #E43222;
              overflow: hidden;
            }
          }
        }
        .right{
          color: rgba(0, 0, 0, .4);
          font-size: 24rpx;
        }
      }
    }
    .hd{
      padding: 0 30rpx;
      padding-bottom: 20rpx;
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title{
        flex: 1;
        text-align: center;
        .name{
          font-size: 32rpx;
          color: #333;
        }
        .desc{
          font-size: 26rpx;
          color: rgba(0, 0, 0, .4);
        }
      }
      .close{
        font-size: 26rpx;
        color: #333;
        width: 80rpx;
        text-align: center;
      }
      .confirm{
        font-size: 26rpx;
        color: #E43222;
        width: 80rpx;
        text-align: center;
      }
    }
  }
</style>